<script setup>
import { ref, reactive } from 'vue'

// 响应式数据
const greeting = ref('Hello World!')
const count = ref(0)

// 方法
const increment = () => {
  count.value++
}

const decrement = () => {
  if (count.value > 0) {
    count.value--
  }
}

const reset = () => {
  count.value = 0
}

// 组件信息列表
const componentInfo = reactive([
  '这是一个简单的HelloWorld组件',
  '使用了Vue 3的组合式API (Composition API)',
  '包含了基本的计数器功能',
  '集成了Element Plus组件库'
])
</script>

<template>
  <div class="hello-world-container">
    <h1 class="title">{{ greeting }}</h1>
    <p class="description">欢迎使用Vue 3开发框架</p>
    
    <div class="counter-section">
      <p>计数器: {{ count }}</p>
      <div class="button-group">
        <el-button type="primary" @click="increment">增加</el-button>
        <el-button type="info" @click="decrement">减少</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
    </div>
    
    <div class="info-section">
      <h2>组件信息</h2>
      <ul>
        <li v-for="(info, index) in componentInfo" :key="index">
          {{ info }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.hello-world-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.title {
  color: #409EFF;
  font-size: 32px;
  margin-bottom: 16px;
}

.description {
  color: #606266;
  font-size: 18px;
  margin-bottom: 30px;
}

.counter-section {
  margin: 30px 0;
  padding: 20px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.info-section {
  text-align: left;
  padding: 20px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-section h2 {
  color: #303133;
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
  color: #606266;
}
</style>
